<template>
	<view>
		<image src="../../static/img/jfmx.png" class="jf_bg w100"></image>
		<view class="relative" style="margin-top: -480rpx;">
			<view class="flex align-center justify-between padding-x-30">
				<image @click="goBack()" src="../../static/img/back_f.png" style="width: 32rpx;height: 32rpx;"></image>
				<view @click="showMutibleDate = true"  style="background: rgba(255,255,255,0.2);" class="padding-x-24 flex1 flex align-center justify-between margin-left-30 radius60">
					<input v-model="date" disabled type="text" class="fs-24 color-fff flex1" style="height: 60rpx;" placeholder="可进行天/月/季度/年度查询">
					<image src="../../static/img/date.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
				<view class="fs-28 color-fff margin-left-30" @click="jump('/pages/my/tixian?type=retail')" >提现</view>
			</view>
			<view class="margin-top-80 flex align-center justify-between">
				<view class="flex1 text-center color-fff">
					<view class="fs-40">{{info.cash}}</view>
					<view class="fs-28 margin-top-16">累计提现</view>
				</view>
				<view class="flex1 text-center color-fff">
					<view class="fs-40">{{info.once_cash}}</view>
					<view class="fs-28 margin-top-16">本次提现</view>
				</view>
				<view class="flex1 text-center color-fff">
					<view class="fs-40">{{info.retail}}</view>
					<view class="fs-28 margin-top-16">余额</view>
				</view>
			</view>
			
			<view style="margin-top: 180rpx;" class="padding-x-24" >
				<view class="fw-600 flex align-center padding-y-30"><view class="bg-zhuse" style="width: 6rpx;height: 30rpx;"></view><text class="fs-30 color-333 margin-left-16">提现明细</text></view>
				
				<view v-if="list.length > 0" class="flex align-center justify-between solid-bottom padding-y-24">
					<view class="text-center flex1 fs-28 color-333">日期</view>
					<view class="text-center flex1 fs-28 color-333">提现方式</view>
					<view class="text-center w20 fs-28 color-333">金额</view>
				</view>
				<view v-for="(item,index) in list" :key='index' class="flex align-center justify-between solid-bottom padding-y-24">
					<view class="text-center flex1 fs-26 color-666">{{item.deal_time}}</view>
					<view class="text-center flex1 fs-26 color1FC830" v-if="item.method == 'wechat'">微信零钱</view>
					<view class="text-center flex1 fs-26 color239AFF" v-if="item.method == 'alipay'">支付宝</view>
					<view class="text-center w20 fs-26 color-333">{{item.cash}}</view>
				</view>
				<!-- <view class="flex align-center justify-between solid-bottom padding-y-24">
					<view class="text-center flex1 fs-26 color-666">2021-09-23  10:23</view>
					<view class="text-center flex1 fs-26 "></view>
					<view class="text-center w20 fs-26 color-333">金额</view>
				</view> -->
				
				<empty style="position: relative;top: 120px;" v-if="list.length < 1"></empty>
				
				
			</view>
			
		</view>
		
		<!-- <view class="padding-x-60  padding-y-30 fixed w100" style="bottom: 0;">
			<view @click="jump('/pages/my/tixian?type=retail')" class="callBtn color-fff radius60 h40 fs-28 text-center">提现</view>
		</view> -->
		
		<date-range mode="date" :showMutibleDate="showMutibleDate" :startDate="startDate" :endDate="endDate"
			 @onSelected="dateSelected"></date-range>
		
	</view>
</template>

<script>
	import dateRange from 'components/zxp-datepickerRange/zxp-datepickerRange.vue'
	export default {
		components: {
			dateRange
		},
		data() {
			return {
				startDate: '2021-12-01',
				endDate: '2022-12-30',
				q: {
					start_time: "",
					end_time: "",
					page: 1
				},
				info:{},
				hasMore: true,
				loadStatus: '',
				list: [],
				date:'',
				showMutibleDate: false,
			}
		},
		onShow() {
			this.q.page = 1;
			this.list = [];
			this.getList();
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.page += 1;
				this.getList();
			}
		},
		methods: {
			getList() {
				this.$api.retail_tx(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.info = res.data;
						this.list = [...this.list, ...res.data.list.data];
						if (res.data.list.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			
			dateSelected: function(e) {
				console.log(e)
				if (e) {
					this.q.start_time = e.start
					this.q.end_time = e.end
					this.date = e.start +'至' + e.end
				}
				/*这里必须将值置为false，否则无法唤起下一次的弹框显示*/
				this.showMutibleDate = false;
				this.list = [];
				this.q.page = 1;
				this.getList();
			},
			
			changeType(type){
				this.type = type;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.color1FC830{color: #1FC830;}
	.color239AFF{color: #239AFF;}
	.jf_bg{height: 560rpx;}
	.uni-input-placeholder{color: #fff;}
	.callBtn{
		width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 60rpx; background: linear-gradient(to bottom,#FDA730,#FE810A);
	}
</style>
